<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="/wxWeb/layout">

<!-- 该页面独有的head -->
<head layout:fragment="data_res_header">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>VUE测试页面</title>
    <!-- ⬇ 自定义的CSS相关引入文件 ⬇️ -->
    <!--例：-->
    <!--<link href='/plugins/charisma-master/css/elfinder.min.css' rel='stylesheet'>-->
    <!--<link href='/plugins/charisma-master/css/elfinder.theme.css' rel='stylesheet'>-->
    <!-- ⬆️ 自定义的CSS相关引入文件 ⬆️ -->
    <style>

    </style>
</head>

<!-- 页面主体 替换 layout 的 main fragment -->
<div layout:fragment="main">
    <div id="toper" type="flex">
        <!-- 顶部 -->
        <van-dropdown-menu>
            <van-dropdown-item v-model="value" :options="option"/>
            <van-dropdown-item title="筛选" ref="item">
                <van-switch-cell v-model="switch1" title="包邮"/>
                <van-switch-cell v-model="switch2" title="团购"/>
                <van-button block type="info" @click="onConfirm">确认</van-button>
            </van-dropdown-item>
        </van-dropdown-menu>
    </div>
    <div id="locker" v-lock>
        <!-- 居中 -->
        <van-row type="flex" justify="center">
            <van-col span="6">{{vvvv}}</van-col>
            <van-col span="6">{{vvvv}}</van-col>
            <van-col span="6">{{vvvv}}</van-col>
        </van-row>
    </div>
    <!-- 日期信息 -->
    <div id="date-info">
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    </div>
    <!-- 底部 -->
    <div id="footer">
        <van-tabbar v-model="active">
            <van-tabbar-item badge="3">
                <span>自定义</span>
                <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="search">标签</van-tabbar-item>
            <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
        </van-tabbar>
    </div>
</div>

<!-- 该页面独有的相关JS -->
<div layout:fragment="data_res_footer">
    <!-- ⬇ 该页面独有的JS ⬇️ -->
    <!--例：-->
    <!--<script th:src="@{/plugins/jquery-easyui-1.4.1/jquery.easyui.min.js}"></script>-->
    <!--<script th:src="@{/plugins/jquery-easyui-1.4.1/plugins/jquery.form.js}"></script>-->
    <!-- ⬆️ 该页面独有的JS ⬆️ -->

    <script th:inline="javascript">
        // 在 #app 标签下渲染一个按钮组件
        new Vue({
            el: '#locker',
            data: {
                vvvv: '1231231231'
            }
        });
        new Vue({
            el: '#toper',
            data() {
                return {
                    value: 0,
                    switch1: false,
                    switch2: false,
                    option: [
                        {text: '全部商品', value: 0},
                        {text: '新款商品', value: 1},
                        {text: '活动商品', value: 2},
                    ],
                    active: 0,
                    icon: {
                        active: 'https://img.yzcdn.cn/vant/user-active.png',
                        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
                    },
                };
            },
            methods: {
                onConfirm() {
                    this.$refs.item.toggle();
                },
            },
        });
        new Vue({
            el: '#footer',
            data() {
                return {
                    value: 0,
                    switch1: false,
                    switch2: false,
                    option: [
                        {text: '全部商品', value: 0},
                        {text: '新款商品', value: 1},
                        {text: '活动商品', value: 2},
                    ],
                    active: 0,
                    icon: {
                        active: 'https://img.yzcdn.cn/vant/user-active.png',
                        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
                    },
                };
            },
        });
        new Vue({
            el: '#date-info',
            data() {
                return {
                    show: false,
                    actions: [
                        { name: '选项' },
                        { name: '选项' },
                        { name: '选项', subname: '描述信息' },
                    ],
                };
            },
            methods: {
                onSelect(item) {
                    // 默认情况下点击选项时不会自动收起
                    // 可以通过 close-on-click-action 属性开启自动收起
                    this.show = false;
                    Toast(item.name);
                },
            },
        });
    </script>
</div>
</html>